<template>
    <div class="lazy-img">
        <div class="lazy0img-content">下面有图片要显示</div>
        <img v-for="(item, index) in imgs" v-LazyLoadImg="true" :key="index"  alt="" :data-src="item">
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { imgListConfig } from './config';
// 控制台获取页面内所有 jpg|png|jpeg 的图片
// const imgDoms = document.querySelectorAll('img');
// const imgsrcs = Array.prototype.map.call(imgDoms, (item) => item.src).filter((item) => /.(jpg|png|jpeg)/.test(item));
// console.log(imgsrcs.slice(0, imgsrcs.length));

const imgs = ref<string[]>(imgListConfig)
/* const io = new IntersectionObserver(
  (observers) => {
    observers.forEach(({ isIntersecting, target }) => {
        if(isIntersecting) {
            console.log(target);
            
            target.src = target.dataset?.src
            io.unobserve(target)
        }
    })
    
  },
  {
    rootMargin: `0px 0px 100px 0px`,
  }
) */
/* onMounted(() => {
  const imgDoms = document.querySelectorAll('img')
  imgDoms.forEach((item) => {
    io.observe(item)
  })
}) */
</script>
<style lang="scss" scoped>
.lazy-img {
    .lazy0img-content {
        height: 130vh;
        background-color: rgb(116, 108, 111);
        font-size: 34px;
    }
    img {
        width: 400px;
        // height: 600px;
        border: 1px solid black;
    }
}
</style>
